<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>智慧监管</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/bean.css" />
    <link rel="stylesheet" href="../css/wisdomSupervise.css">
</head>

<body>
    <div class="guding">
        <nav class="navbar navbar-default g-nav">
            <span class="navbar-brand">全域旅游综合信息服务平台</span>
            <div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/html/home.html">首页</a></li>
                    <li>
                        <a href="/html/realTimeTraffic.html">智慧分析</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/realTimeTraffic.html">实时客流</a>
                            <a class="sub-nav-item" href="/html/touristPortrait.html">游客画像</a>
                        </div>
                    </li>
                    <li>
                        <a class="active" href="/html/demoareaSupervise.html">智慧监管</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/demoareaSupervise.html">示范区监管</a>
                            <a class="sub-nav-item" href="/html/scenicSpotList.html">视频监控</a>
                            <a class="sub-nav-item" href="/html/safetyWarning.html">安全预警</a>
                            <a class="sub-nav-item" href="/html/wisdomSupervise_guide.html">旅游产业数据</a>
                            <a class="sub-nav-item active" href="/html/complaints.html">投诉举报管理</a>
                        </div>
                    </li>
                    <li><a href="/html/resources.html">旅游资源</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!--导航结束-->
    <div class="content" style="padding-bottom: 0;">
        <div class="wisdom-supervise-wrap border flex backgroundfff height952">
            <div class="left-area" style="padding-bottom: 0;">
                <section class="sub-nav">
                    <a href="/html/wisdomSupervise_guide.html">导游</a>
                    <a href="/html/wisdomSupervise_employees.html">从业人员</a>
                    <a href="/html/wisdomSupervise_travelAgency.html">旅行社</a>
                    <a class="current" href="/html/wisdomregulation-a.html">旅游大巴</a>
                </section>
                <section class="city-distribut-chart">
                    <h3>旅行社城市分布</h3>
                    <div class="height390" id="echart1"></div>
                </section>
                <section class="complaint-box">
                    <div class="complaint-box__topbar">
                        <h3>旅行社被投诉信息列表</h3>
                        <span class="complaint-box__total">(今日投诉<em>34</em>条、累积投诉<em>1290</em>条)</span>
                        <a class="section-button btn-view-more">查看更多</a>
                    </div>
                    <table class="complaint-box__table">
                        <thead>
                            <th width="74">序号</th>
                            <th>旅行社</th>
                            <th>法人姓名</th>
                            <th>投诉事由</th>
                            <th>投诉事件</th>
                            <th>处理状态</th>
                        </thead>
                    </table>
                </section>
            </div>
            <div class="right-area">
                <section class="">
                    <div class="statistics-record">
                        <div class="statistics-record-content">
                            <div class="statistics-record-content-bg"></div>
                            <div class="statistics-record-content__item">
                                <div class="statistics-record-content__item-name">全部旅游大巴（辆）</div>
                                <div class="statistics-record-content__item-value">1,931</div>
                            </div>
                            <div class="cut-line"></div>
                            <div class="statistics-record-content__item">
                                <div class="statistics-record-content__item-name">今日出行大巴（辆）</div>
                                <div class="statistics-record-content__item-value">1,931</div>
                            </div>
                        </div>
                    </div>
                    <h3 class='margin-bottom28'>旅游大巴轨迹</h3>
                    <div class="height734" id="container">

                    </div>
                </section>
            </div>
        </div>
    </div>
    </div>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/lodash.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script src="../js/wisdomregulation-a.js"></script>
    <script>
        getCharts('echart1', 'bar');

    </script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '北京公交路线 - 线特效';

        $.get('../js/lines-bus.json', function (data) {
            var hStep = 300 / (data.length - 1);
            var busLines = [].concat.apply([], data.map(function (busLine, idx) {
                var prevPt;
                var points = [];
                for (var i = 0; i < busLine.length; i += 2) {
                    var pt = [busLine[i], busLine[i + 1]];
                    if (i > 0) {
                        pt = [
                            prevPt[0] + pt[0],
                            prevPt[1] + pt[1]
                        ];
                    }
                    prevPt = pt;

                    points.push([pt[0] / 1e4, pt[1] / 1e4]);
                }
                return {
                    coords: points,
                    lineStyle: {
                        normal: {
                            color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                        }
                    }
                };
            }));
            myChart.setOption(option = {
                bmap: {
                    center: [116.46, 39.92],
                    zoom: 10,
                    roam: true,
                    mapStyle: {
                        'styleJson': [{
                                'featureType': 'water',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#031628'
                                }
                            },
                            {
                                'featureType': 'land',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#000102'
                                }
                            },
                            {
                                'featureType': 'highway',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            },
                            {
                                'featureType': 'arterial',
                                'elementType': 'geometry.fill',
                                'stylers': {
                                    'color': '#000000'
                                }
                            },
                            {
                                'featureType': 'arterial',
                                'elementType': 'geometry.stroke',
                                'stylers': {
                                    'color': '#0b3d51'
                                }
                            },
                            {
                                'featureType': 'local',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#000000'
                                }
                            },
                            {
                                'featureType': 'railway',
                                'elementType': 'geometry.fill',
                                'stylers': {
                                    'color': '#000000'
                                }
                            },
                            {
                                'featureType': 'railway',
                                'elementType': 'geometry.stroke',
                                'stylers': {
                                    'color': '#08304b'
                                }
                            },
                            {
                                'featureType': 'subway',
                                'elementType': 'geometry',
                                'stylers': {
                                    'lightness': -70
                                }
                            },
                            {
                                'featureType': 'building',
                                'elementType': 'geometry.fill',
                                'stylers': {
                                    'color': '#000000'
                                }
                            },
                            {
                                'featureType': 'all',
                                'elementType': 'labels.text.fill',
                                'stylers': {
                                    'color': '#857f7f'
                                }
                            },
                            {
                                'featureType': 'all',
                                'elementType': 'labels.text.stroke',
                                'stylers': {
                                    'color': '#000000'
                                }
                            },
                            {
                                'featureType': 'building',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#022338'
                                }
                            },
                            {
                                'featureType': 'green',
                                'elementType': 'geometry',
                                'stylers': {
                                    'color': '#062032'
                                }
                            },
                            {
                                'featureType': 'boundary',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#465b6c'
                                }
                            },
                            {
                                'featureType': 'manmade',
                                'elementType': 'all',
                                'stylers': {
                                    'color': '#022338'
                                }
                            },
                            {
                                'featureType': 'label',
                                'elementType': 'all',
                                'stylers': {
                                    'visibility': 'off'
                                }
                            }
                        ]
                    }
                },
                series: [{
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: busLines,
                    silent: true,
                    lineStyle: {
                        normal: {
                            // color: '#c23531',
                            // color: 'rgb(200, 35, 45)',
                            opacity: 0.2,
                            width: 1
                        }
                    },
                    progressiveThreshold: 500,
                    progressive: 200
                }, {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    polyline: true,
                    data: busLines,
                    lineStyle: {
                        normal: {
                            width: 0
                        }
                    },
                    effect: {
                        constantSpeed: 20,
                        show: true,
                        trailLength: 0.1,
                        symbolSize: 1.5
                    },
                    zlevel: 1
                }]
            });
        });;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }


        $('.g-nav').mousemove(function () {
            $('.g-nav2').show(300);
        })

    </script>
</body>

</html>
